$(function () {
  $(".smllimg").on("mouseenter", function () {
    $(".smallarea").show();
    $(".bigarea").show();
    // //计算小区域的大小
    // $("#smallArea").css({
    //   width: $("#smallImg").width() / $(".bigimg").width() * $(".bigarea").width(),
    //   height: $("#smallImg").height() / $(".bigimg").height() * $(".bigarea").height(),
    // })
    //移动
    $(this).on("mousemove", function (e) {
      let mx = e.pageX - $(this).offset().left - $('.smallarea').width() / 2;
      let my = e.pageY - $(this).offset().top - $('.smallarea').height() / 2;

      if (mx <= 0) {
        mx = 0
      }
      if (mx >= $(this).width() - $('.smallarea').width()) {
        mx = $(this).width() - $('.smallarea').width()
      }
      if (my <= 0) {
        my = 0;
      }

      if (my >= $(this).height() - $('.smallarea').height()) {
        my = $(this).height() - $('.smallarea').height()
      }
      //比例
      let oScale = $(".bigarea").width() / $(".smallarea").width();

      $(".bigimg").css({
        left: oScale * mx * -1,
        top: oScale * my * -1
      })
      $('.smallarea').css({
        left: mx,
        top: my
      })
    })
  }).on("mouseleave", function () {
    $(".smallarea").hide();
    $(".bigarea").hide();
    $(this).off("mousemove");
  })
})